<!DOCTYPE html>
<html  lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/jquery-3.3.1.js"></script>
    <style>
        input{
            outline: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background: linear-gradient(to right top, #65dfc9, #6cdbeb);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        input{
            outline: none;
            margin: 5px;
        }
        input[type="text"],input[type="password"]{
            background: linear-gradient( to left top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) );
            border-radius: 5rem;
            width: 200px;
            outline: none;
            padding: 10px;
            border:2px solid rgba(142, 165, 240, 0.8)
        }
        input[type="button"]{
            background: linear-gradient(to right top, #65dfc9, #6cdbeb);
            width: 265px;
            padding:15px 0px ;
            border-radius: 5rem;
            border: none;
            outline: none;
            transition: all 85ms linear;
        }
        input[type="submit"]:hover{
            box-shadow: 6px 6px 20px rgba(142, 165, 240, 0.8);
        }
        .card{
            background: linear-gradient( to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3) );
            border-radius: 2rem;
            padding: 50px;
        }
    </style>
</head>
<body>

<form id="loginForm">
    <div class="card" >
        <img class="User_img" src="images/User.png" alt="User">
        <div class="container">
            <h2><b>登录</b></h2>
            <input class="textbox"  type="text" name="username" placeholder="用户名"  size="35">
            <br>
            <input class="textbox" type="password" name="password" placeholder="密码" size="35">

            <div class="verify">
                <input name="check" type="text" placeholder="请输入验证码" autocomplete="off">
                <p><img src="checkCode" alt="" onclick="changeCheckCode(this)"></p>
                <script type="text/javascript">
                    //图片点击事件
                    function changeCheckCode(img) {
                        img.src="checkCode?"+new Date().getTime();
                    }
                </script>

            <br>
            <input id="btn_sub" class="btn_signin" type="button" name="signin" value="登录">

        </div>
    </div>
</form>
<script>

    $(function () {
        //1.给登录按钮绑定单击事件
        $("#btn_sub").click(function () {
            //2.发送ajax请求，提交表单数据
            $.post("user/login",$("#loginForm").serialize(),function (data) {

                if(data.status==0){
                    //登录成功
                    alert("登录成功")
                    setTimeout(`location.href="index.html"`,500);
                }else{
                    //登录失败
                    alert(data.msg);
                }
            });



        });
    });


    //3.处理响应结果



</script>
</body>
</html>